import React, { useState, useEffect } from "react";
import {
  NavBar,
  Icon,
  InputItem,
  WingBlank,
  WhiteSpace,
  Button,
  Modal,
  Toast,
} from "antd-mobile";
import { verifyPhone } from "../../api/regist";
import "../login/Login.css";
console.log("login加载了");

export default function RegisterPhone(props) {
  const [areanum] = useState(localStorage.getItem("area-num") || "86");

  const [isDisabled, setIsDabled] = useState(true);
  const [istelnum, setIstelnum] = useState();
  // console.log(props);

  useEffect(() => {
    const isShow = localStorage.getItem("isShow");
    isShow === "true" &&
      Modal.alert(
        <h4>"注册协议及隐私政策"</h4>,
        <div>
          在您注册成为硅谷用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）
          <p>
            <a href="">《用户注册协议》</a>
          </p>
          <p>
            <a href="">《用户隐私政策》</a>
          </p>
        </div>,
        [
          {
            text: "不同意",
            onPress: () => props.history.goBack(),
          },
          {
            text: "同意",
            onPress: () => {
              localStorage.setItem("flag", true);
            },
            style: { backgroundColor: "red", color: "#fff" },
          },
        ]
      );
    return () => {
      localStorage.setItem("isShow", null);
    };
  }, []);

  //手机号码规则判断
  function changeHandle(val) {
    let value = val.trim();
    let rule = /^1\d{10}$/;
    setIsDabled(!rule.test(value));
    setIstelnum(value);
  }
  //手机号码输入完成
  function enterHandle(e) {
    if (!isDisabled && e.keyCode === 13) {
      messageHandle();
      setIsDabled(true);
    }
  }

  let messageHandle = async () => {
    const result = await verifyPhone(istelnum);
    result.data.success
      ? Modal.alert(null, <div>我们将发送短信/语音验证码至：{istelnum}</div>, [
          {
            text: "不同意",
            onPress: () => {
              setIsDabled(false);
              props.history.push("/registerPhone");
            },
          },
          {
            text: "同意",
            onPress: () => {
              localStorage.setItem("phone", istelnum);
              // 进入下个页面
              props.history.push("/registerCode");
            },
            style: { backgroundColor: "red", color: "#fff" },
          },
        ])
      : Toast.info(result.data.message, 2, () => {
          props.history.push("/registerPhone");
        });
  };

  return (
    <div className="wrap">
      <NavBar
        mode="light"
        icon={<Icon type="left" color="black" />}
        onLeftClick={() => props.history.push("/login")}
      >
        硅谷手机注册
      </NavBar>
      <InputItem
        clear
        placeholder="请输入手机号"
        onChange={changeHandle}
        onKeyDown={enterHandle}
      >
        <div
          className="input-wrap"
          onClick={() => {
            props.history.push("/country");
          }}
        >
          <span>+{areanum}</span>
          <Icon type="down"></Icon>
        </div>
      </InputItem>
      <WingBlank>
        <WhiteSpace size="xl"></WhiteSpace>
        <WingBlank>
          <Button
            type="warning"
            disabled={isDisabled}
            className="btn-login"
            onClick={
              messageHandle
              // () => {
              // console.log("button按下");
              // }
            }
          >
            下一步
          </Button>
        </WingBlank>
      </WingBlank>
    </div>
  );
}
